import React, { ReactElement, useState, useEffect } from 'react'
import { Form, Row, Col, Input, Button, Table, Select, Drawer, Divider, Radio, Upload, TreeSelect } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from "umi"
import styles from './goodTypeList.less';
import { DrawerProps } from 'antd/es/drawer';
const { Option } = Select;
interface Props {

}

export default function goodTypeList({ }: Props): ReactElement {
    const dispatch = useDispatch()
    const GoodList = useSelector((state: any) => {
        return state.goodModel.GoodList
    })

    const [form] = Form.useForm();
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const TypeList = useSelector((state: any) => state.goodModel.TypeList)
    const ServiceTypeList = useSelector((state: any) => state.goodModel.ServiceTypeList)
    useEffect(() => {
        dispatch({
            type: 'goodModel/getGoodTypeBySaga',
            payload: { pageSize: 1000 }
        })
    }, [])

    const btnSearch = (search: any) => {
        console.log('查询: ', search);
        dispatch({
            type: 'goodModel/getGoodTypeBySaga',
            payload: search
        })
    };
    // 选择
    const onSelectChange = (selectedRowKeys: any) => {
        console.log('勾选: ', selectedRowKeys);
        setSelectedRowKeys(selectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
        ],
    };
    const locales = { selectionAll: '全选所有', selectInvert: '反选当页', selectNone: '清空所有' }
    // 分页：
    const handleTableChange = (pagination: any) => {
        setPagination(() => pagination)
    }
    const [pagination, setPagination] = useState<any>(
        {
            current: 1,
            pageSize: 5,
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: [3, 5, 7],
            // total:1344
        }
    )
    const columns: any = [
        {
            title: 'id',
            dataIndex: 'id',
            align: 'center',
            width: 200
        },
        {
            title: '名称',
            dataIndex: 'title',
            align: 'center',
            width: 200

        },
        {
            title: '状态',
            dataIndex: 'status',
            align: 'center',
            width: 200,
            render: (status: any) => {
                return ((status == "启用") ? "启用" : "停用")
            },
        },
        {
            title: '操作',
            align: 'center',
            key: 'action',
            width: 200,
            render: (text: any) => {
                return <button>修改</button>
            },
        }
    ];
    // 新增表单onFinish
    const onFinish = (values: any) => {
        console.log('表单新增内容: ', values);
        dispatch({
            type: 'goodModel/addGoodBySaga',
            payload: values
        })
    };
    // 树形控件：类型
    const [value, setValue] = useState(undefined);
    const getTypeList = () => {
        dispatch({
            type: 'goodModel/getGoodTypeBySaga',
        })
    }
    const onChange = () => {
        setValue(value);
    };
    // 抽屉：
    const [visible, setVisible] = useState(false);
    const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
    const showDrawer = () => {
        setVisible(true);
    };
    const onClose = () => {
        setVisible(false);
    };
    // 上传图片：

    // 抽屉内表单样式：
    const layout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 6 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    return (
        <div>
            {/* 抽屉： */}
            <Drawer
                title="新增商品类型"
                placement={placement}
                width={500}
                onClose={onClose}
                visible={visible}
            >
                <Form
                    {...layout}
                    name="basic"
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="商品类型名称"
                        name="name"
                        rules={[{ required: true, message: '商品类型名称不能为空' }]}
                    >
                        <Input className={styles.addName} />
                    </Form.Item>
                    <Form.Item
                        label="上级商品类型"
                        name="pid"
                        rules={[{ required: true, message: '商品类型名称不能为空' }]}
                    >
                    </Form.Item>
                    <Divider />
                    <Form.Item {...tailLayout} style={{ textAlign: 'right' }}>
                        <Button style={{ margin: '0 8px' }} onClick={onClose}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit">
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            {/* 选择-重置： */}
            <Form form={form} name="advanced_search" onFinish={btnSearch} className={styles.search_header}>
                <Row gutter={24} className={styles.search_left}>
                    <Col span={8} key='name'>
                        <Form.Item name='name' label='商品类型名称' >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={8} key='status'>
                        <Form.Item name='status' label='商品状态'>
                            <Select
                                placeholder="选择状态"
                            >
                                <Option value="1">启用</Option>
                                <Option value="0">停用</Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row className={styles.search_right}>
                    <Col span={24} style={{ textAlign: 'left' }}>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                        <Button style={{ margin: '0 8px' }} onClick={() => { form.resetFields(); }}>
                            重置
                        </Button>
                    </Col>
                    <Col span={24} style={{ textAlign: 'left' }}>
                        {/* 抽屉：新增按钮 */}
                        <Button type="primary" onClick={showDrawer}>
                            新增
                        </Button>
                        <Button style={{ margin: '0 8px' }}>
                            删除
                        </Button>
                    </Col>
                </Row>
            </Form>
            <div className={styles.good_list}>
                <Table rowSelection={rowSelection} columns={columns} dataSource={TypeList} rowKey='id' pagination={pagination} onChange={handleTableChange} locale={locales} />
            </div>
        </div>
    )

}
